<template>
  <div class="box">
    <div class="topBar">
      <div class="topBox">
        <div>
          <el-form
            ref="headerSearchForm"
            :model="headerSearchForm"
            :inline="true"
          >
            <el-form-item label="客户名称" prop="custName" label-width="110px">
              <el-input
                v-model="headerSearchForm.customerName"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="地区" prop="customerType">
              <el-select
                v-model="headerSearchForm.cusBlocks"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in typeData"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item
              label="一级分类"
              prop="productView"
              label-width="100px"
            >
              <el-select
                v-model="headerSearchForm.topTradeTypeYear"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in productViewOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="客户层级"
              prop="productView"
              label-width="100px"
            >
              <el-select
                v-model="headerSearchForm.customerLevel"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in productViewOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="TOP1交易大类"
              prop="productView"
              label-width="110px"
            >
              <el-select
                v-model="headerSearchForm.topTradeTypeYear"
                placeholder="请选择"
                size="mini"
                clearable
              >
                <el-option
                  v-for="(item, index) in productViewOption"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div>
            <el-row>
              <el-col :span="16" style="text-align: left">
                <el-button
                  type="primary"
                  class="gray-btn"
                  @click="handleisCollectAll"
                  >{{ isCollectAll ? '查看全部' : '仅看收藏' }}</el-button
                >
                <!-- <el-button type="primary" class="gray-btn" @click="add"
                  >新增</el-button -->
                <!-- 
                <el-button type="primary" class="gray-btn" @click="viewFn"
                  >仅看收藏</el-button
                > -->
                <!-- <el-button type="primary" class="btn">导入</el-button> -->
                <el-button type="primary" class="btn">导出</el-button>
              </el-col>
              <el-col :span="8" style="text-align: right">
                <el-button type="primary" class="gray-btn" @click="searchFn"
                  >查询</el-button
                >
                <el-button type="primary" class="btn">重置</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="tableBox">
        <el-table
          :data="isCollectAll ? tableDatas : tableData"
          class="tableBoxChild"
          height="500"
        >
          <el-table-column label="收藏" align="center" width="50px">
            <template slot-scope="scope">
              <i
                @click="handleCollect(scope.row)"
                :class="
                  scope.row.isCollect === 'Y'
                    ? 'el-icon-star-on'
                    : 'el-icon-star-off'
                "
              ></i>
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="50px"
          >
          </el-table-column>
          <el-table-column
            prop="custNumber"
            label="客户id"
            align="center"
            width="150px"
            :show-overflow-tooltip="true"
            v-if="false"
          >
          </el-table-column>
          <el-table-column
            prop="custName"
            label="客户名称"
            width="200px"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            width="100px"
            prop="cusBlocks"
            label="地区"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="customerAttribute"
            width="110px"
            label="客户属性"
            :show-overflow-tooltip="true"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="customerAttributeDetail"
            width="110px"
            label="客户属性细分"
            :show-overflow-tooltip="true"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="custCat"
            width="110px"
            label="客户类型"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            prop="customerLevel"
            label="客户层级"
            align="center"
            :show-overflow-tooltip="true"
          >
          </el-table-column>
          <el-table-column
            label="资产负债"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="totalAssets"
              label="资产总额(亿)"
              width="150px"
              align="center"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="scope">
                {{
                  scope.row.totalAssets &&
                  (scope.row.totalAssets / 100000000).toFixed(4)
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="totalLiabilities"
              :show-overflow-tooltip="true"
              width="150px"
              label="负债总额(亿)"
              align="center"
            >
              <template slot-scope="scope">
                {{
                  scope.row.totalLiabilities &&
                  (scope.row.totalLiabilities / 100000000).toFixed(4)
                }}
              </template>
            </el-table-column>
            <el-table-column
              prop="tdr"
              label="TDR"
              width="150px"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="授信额度"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="creditTotalLimit"
              label="授信总额(万)"
              width="150px"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="creditTotalLimitRest"
              width="150px"
              :show-overflow-tooltip="true"
              label="剩余额度(万)"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="TOP1交易大类(按金额)"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="topTradeTypeYear"
              label="今年以来"
              align="center"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="topTradeTypeOneYear"
              label="近一年"
              align="center"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="买入：总笔数(笔)"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="topTradePYear"
              label="今年以来"
              :show-overflow-tooltip="true"
              align="center"
              width="150px"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="topTradePOneYear"
              label="近一年"
              align="center"
              width="150px"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="买入：总金额(亿)"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="topTradeAmountPYear"
              label="今年以来"
              align="center"
              width="150px"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="topTradeAmountPOneYear"
              label="近一年"
              width="150px"
              :show-overflow-tooltip="true"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="卖出：总笔数(笔)"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              prop="topTradeSYear"
              label="今年以来"
              width="150px"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              prop="topTradeSOneYear"
              label="近一年"
              width="150px"
              align="center"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column
            label="卖出：总金额(亿)"
            align="center"
            :show-overflow-tooltip="true"
          >
            <el-table-column
              :show-overflow-tooltip="true"
              prop="topTradeAmountSYear"
              width="150px"
              label="今年以来"
              align="center"
            >
            </el-table-column>
            <el-table-column
              :show-overflow-tooltip="true"
              prop="topTradeAmountSOneYear"
              label="近一年"
              width="150px"
              align="center"
            >
            </el-table-column>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120px">
            <template slot-scope="scope">
              <span @click="edit(scope.row)" class="operator">编辑</span>
              <!-- <span class="operator" @click="deleteFn(scope.row)">删除</span> -->
              <span @click="viewDetail(scope.row)" class="operator">详情</span>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          @current-change="pageFn"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增编辑弹框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1000px"
      :append-to-body="true"
      destroy-on-close
    >
      <FormComponentCorporate
        v-if="type === 'corporate'"
        :dealMajorForm="corporateForm"
      />
      <FormComponentProduct
        v-if="type === 'product'"
        :dealMajorForm="productForm"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" class="btn">取 消</el-button>
        <el-button type="primary" @click="handleOk" class="gray-btn"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import FormComponent from './components/FormComponent';

import FormComponentCorporate from './components/FormComponentCorporate.vue';
import FormComponentProduct from './components/FormComponentProduct.vue';
import {
  getList,
  getBaseInfo,
  getProductBaseInfo,
  getQueryView,
  getProductQueryView,
  updateCustomer,
  updateProductCustomer,
  getCustomerBaseInfoAdd,
  getCustomerBaseInfoRemove,
  getProductBaseInfoAdd,
  getProductBaseInfoRemove,
} from '@/api/customerList/index.js';

export default {
  components: { FormComponentCorporate, FormComponentProduct },
  type: {
    type: String,
  },

  data() {
    return {
      corporateForm: {
        customerLongName: '', //公司全称
        customerShortName: '', // 公司简称
        orgInstitutionBarCode: '', //组织机构代码
        creditCode: '', //统一社会信用代码
        securitiesRepresentative: '', //法定代表人
        registeredCapital: '', // 注册资本
        paidInCapital: '', //实缴资本
        industryClassification: '', //行业分类
        corpOwnership: '', //公司类型
        idType: '', //主证件类型
        idNumber: '', //主证件号码
        regCountry: '', //注册登记国家
        auxDocType: '', //辅证件类型
        auxDocNum: '', //辅证件号码
        creationCh: '', //创建渠道
        ibankProp: '', //同业属性
        indCat: '', //国民经济行业类型(门类)
        indClass: '', //国民经济行业类型(大类)
        registeredAddress: '', //注册地址
        operatingState: '', //经营状态
        dateOfEstablishment: '', //成立日期
        officeAddress: '', //办公地址
        suspectedActualController: '', //疑似实际控制人
        dateOfApproval: '', //核准日期
        registrationNumber: '', //注册号
        operatingTerm: '', //营业期限
        registrationAuthority: '', //登机机关
        companyEnglishName: '', //公司英文名
        personnelSize: '', //人员规模
        insuredNumber: '', //参保人数
        cusBlocks: '', //所属省份
        toListOrNot: '', //是否上市
        ecifCustId: '', //ECIF编号
        supCustNumber: '', //上级主管单位客户号
        supName: '', //上级主管单位名称
        supIdType: '', //上级主管单位主证件类型
        supIdNumber: '', //上级主管单位主证件号码
        businessScope: '', //经营范围
        companyIntro: '', //简介
        customerAttributeDetail: '', //客户属性细分
        strategicSign: '', //签署战略
        contributeOrder: '', //贡献度排名
        comWebsite: '', //公司官网
        custCat: '', //客户类型
      },

      productForm: {
        assetCode: '', //基金代码
        fundShortName: '', // 基金简称
        fundFullName: '', //基金全称
        fundManagerName: '', //基金管理人名称
        fundProperty: '', //基金属性
        fundEstablishDate: '', // 基金成立日期
        fundSubscribeEndDate: '', //基金认购结束日期
        listDate: '', //上市日期
        existStartDate: '', //存续开始日期
        existEndDate: '', //存续结束日期
        isLimitTermFlag: '', //有限期限标志
        operationMode: '', //运作方式
        currencyCode: '', //货币代码
        investType: '', //投资类型
        latestShare: '', //最新份额
        fundUnitValue: '', //基金单位价值
        hfFundClassFirst: '', //基金投资一级分类
        hfFundClassSecond: '', //基金投资二级分类
        hfFundClassCsrc: '', //证监会基金分类
        hfEndHoldingStockProp: '', //期末持股比例
        hfForcastClosedEndDate: '', //预计封闭期结束日
        hfFundType: '', //基金类型
        hfSubscribeRedeemStatus: '', //申购赎回状态
        hfAgentDepartment: '', //被代理人所属部门
        hfSpbHoldingProp: '', //持有SPV股权比例
        hfIsRegularOpenFundFlag: '', //是否定期开放基金
        hfAgentCountry: '', //被代理人所属国家:
        hfForcastNextOpenDate: '', //预计下期开放日
        hfDeclareEntityRole: '', //申报主体身份
        hfDividendFlag: '', //是否分红
        hfCutOffTime: '', //每日估值截止时间
        hfCutOffTimeZone: '', //每日估值截止时区
        hfSettlementDays: '', //交易日期与结算日期间隔
        hfUnitValueDecimal: '', //单位价值小数位
        hfCustomFunds: '', //是否定制基金
        hfFundIssuePlace: '', //基金发行地
        hfInvestInstrumentType: '', //投资工具类型
        hfFundBusinessType: '', //基金业务类型
        hfSubsCapitalRaiseMode: '', //申购基金出资方式
        hfInvestedOrgCode: '', //被投资机构代码
        hfInvestedOrgIndustry: '', //被投资机构行业
        hfInvestedOrgRelation: '', //被投资机构关系
        hfFinalControlFullName: '', //最终控制方全称
        hfFinalControlCountry: '', //最终控制方国家
        hfEndTermVotingProp: '', //期末表决权比例
        hfHoldingInvestedOrg: '', //持有被投资机构
        hfSpvBelongCountry: '', //SPV所属国家
        hfSpvName: '', //SPV名称
        hfSpvCode: '', //SPV代码
        hfSpvBelongDepart: '', //SPV所属部门
        hfInvestedOrgListFlag: '', //被投资机构已上市
        latestAmount: '', //最新规模
        avgReturnQuarter: '', //近3月收益率
        avgReturnYear: '', //交易日期与结算日133期间隔
        hfSettlementD222ays: '', //近1年收益率
        fundCom: '', //基金公司
        contributeOrder: '', //贡献度排名
        custCat: '', //客户类型
      },

      dialogVisible: false,
      isCollectAll: false,
      tableData: [
        {
          customerName: '中国工商银行股份有限公司',
          customerType: '国有银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_001',
          productView: '法人户',
          type: '2',
          status: '有效',
          customerId: '1',
          isCollect: 'N',
        },
        {
          customerName: '中国建设银行股份有限公司',
          customerType: '国有银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_002',
          productView: '法人户',
          type: '1',
          status: '有效',
          customerId: '2',
          isCollect: 'N',
        },
        {
          customerName: '宁波银行股份有限公司',
          customerType: '股份制银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_003',
          productView: '产品户',
          type: '1',
          status: '有效',
          customerId: '3',
          isCollect: 'N',
        },
        {
          customerName: '天弘基金管理有限公司',
          customerType: '基金公司',
          customerSubType: '基金',
          customerPly: '一般客户',
          customerCoding: 'customer_004',
          type: '2',
          productView: '产品户',
          status: '有效',
          customerId: '4',
          isCollect: 'N',
        },
      ],
      tableDatas: [
        {
          customerName: '中国工商银行股份有限公司',
          customerType: '国有银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_001',
          productView: '法人户',
          type: '2',
          status: '有效',
          customerId: '1',
          isCollect: 'N',
        },
        {
          customerName: '中国建设银行股份有限公司',
          customerType: '国有银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_002',
          productView: '法人户',
          type: '1',
          status: '有效',
          customerId: '2',
          isCollect: 'N',
        },
        {
          customerName: '宁波银行股份有限公司',
          customerType: '股份制银行',
          customerSubType: '银行',
          customerPly: '一般客户',
          customerCoding: 'customer_003',
          productView: '产品户',
          type: '1',
          status: '有效',
          customerId: '3',
          isCollect: 'N',
        },
        {
          customerName: '天弘基金管理有限公司',
          customerType: '基金公司',
          customerSubType: '基金',
          customerPly: '一般客户',
          customerCoding: 'customer_004',
          type: '2',
          productView: '产品户',
          status: '有效',
          customerId: '4',
          isCollect: 'N',
        },
      ],
      headerSearchForm: {
        customerName: '',
        customerType: '',
        customerPly: '',
        customerSubType: '',
      },
      total: 10,
      typeData: [],
      typeSubData: [],
      productViewOption: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '产品户',
          value: '1',
        },
        {
          label: '法人户',
          value: '2',
        },
      ],
      customerPlyData: [
        {
          label: '战略',
          value: 'strategy',
        },
        {
          label: '重要',
          value: 'significance',
        },
        {
          label: '长尾',
          value: 'longTail',
        },
      ],
      title: '',
    };
  },
  async mounted() {
    this.searchFn();
  },
  methods: {
    async searchFn() {
      const params = {
        custName: '',
        cusBlocks: '',
        customerAttribute: '',
        customerAttributeDetail: '',
        custType: '',
        customerLevel: '',
        topTradeTypeYear: '',
      };
      const res = await getList(params);
      this.tableData = res.data.records;
      this.tableDatas = res.data.records.filter(
        (item) => item.isCollect === 'Y'
      );
      console.log(res, '665');
    },
    viewFn() {},
    add() {
      this.title = '新增';
      this.dialogVisible = true;
    },
    async edit(row) {
      this.title = '编辑';

      if (row.customerAttribute === '法人户') {
        this.type = 'corporate';
        const corporateRes1 = await getBaseInfo({ customerId: row.custNumber });
        let corporateData1 = corporateRes1.data;
        const corporateRes2 = await getQueryView({
          customerId: row.custNumber,
        });
        let corporateData2 = corporateRes2.data;
        this.corporateForm = { ...corporateData1, ...corporateData2 };
      } else {
        this.type = 'product';
        const productRes1 = await getProductBaseInfo({
          customerId: row.custNumber,
        });
        let productData1 = productRes1.data;
        const productRes2 = await getProductQueryView({
          customerId: row.custNumber,
        });
        let productData2 = productRes2.data;
        this.productForm = { ...productData1, ...productData2 };
      }
      this.dialogVisible = true;
    },
    viewDetail(row) {
      // this.title = '详情'
      // this.dialogVisible = true
      // this.$router.push('/customerManagement/customerView');
      // this.$store.commit('user/SET_CUSTOMERINFO', { customerId: 'test01' });
      debugger;
      console.log(row, 'row');
      let custNowType = '2';
      if (row.customerAttribute === '产品户') custNowType = '1';
      this.$router.push({
        path: '/customerManagement/customerView',
        query: {
          type: custNowType,
          customerId: row.custNumber,
          customerName: row.custName,
        },
      });
    },
    handleOk() {
      if (this.type === 'corporate') {
        updateCustomer(this.corporateForm)
          .then((res) => {
            this.$message.success('编辑成功');
            this.searchFn();
            this.dialogVisible = false;
          })
          .catch((err) => {
            this.$message.error('编辑失败');
          });
      } else {
        console.log('321123123', this.productForm);

        updateProductCustomer(this.productForm)
          .then((res) => {
            this.$message.success('编辑成功');
            this.searchFn();
            this.dialogVisible = false;
          })
          .catch((err) => {
            this.$message.error('编辑失败');
          });
      }
    },
    toCustomerView() {
      this.$router.replace('/customerManagement/customerView');
    },
    handleisCollectAll() {
      this.isCollectAll = !this.isCollectAll;
    },
    pageFn() {},
    async handleCollect(row) {
      const params = {
        customerId: row.custNumber,
        // customerId: 'test02'
      };
      if (row.customerAttribute === '产品户') {
        if (row.isCollect === 'Y') {
          await getProductBaseInfoRemove(params).then((res) => {
            this.searchFn();
          });
        } else {
          await getProductBaseInfoAdd(params).then((res) => {
            this.searchFn();
          });
        }
      } else if (row.customerAttribute === '法人户') {
        if (row.isCollect === 'Y') {
          await getCustomerBaseInfoRemove(params).then((res) => {
            this.searchFn();
          });
        } else {
          await getCustomerBaseInfoAdd(params).then((res) => {
            this.searchFn();
          });
        }
      }
    },
    deleteFn(row) {
      console.log(row);
      this.$confirm('确定删除该信息?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-table ::v-deep th.el-table__cell {
  background-color: #1c2238 !important;
  color: #fff;
}

.box {
  .topBar {
    min-height: 80px;
    background-color: #262d47;
    margin-bottom: 10px;
    padding: 20px 20px;
    padding-left: 40px;
    padding-bottom: 10px;
  }

  .topBox {
    span {
      display: inline-block;
    }

    .searchBtn {
      margin-left: 20px;
    }

    .zj {
      margin-left: 20px;
    }

    .khTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }

    .khInput,
    .zjInput {
      height: 30px;
      line-height: 30px;
      width: 200px;
      overflow: hidden;
      border: 1px solid rgba(126, 163, 255, 0.3);
      color: #ffffff;
      background-color: #363657;
      border-radius: 3px;
      cursor: pointer;
      text-align: center;
      line-height: 30px;
      padding: 0px 10px;
      font-size: 12px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .zjTitle {
      height: 30px;
      line-height: 30px;
      vertical-align: top;
      color: #ffffff;
      font-size: 14px;
      font-weight: 700px;
      margin-right: 10px;
    }
  }

  .left {
    width: 240px;
    background-color: #262d47;
    height: 100%;
  }

  .right {
    flex: 1;
    height: 88%;
    display: flex;
    flex-direction: column;
  }

  .searchList {
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    height: 700px;
    overflow: scroll;

    .searchListItem {
      height: 35px;
      line-height: 35px;
      text-align: center;
      color: #959fc5;
      font-size: 12px;
      overflow: hidden; //超出隐藏
      white-space: nowrap; //不折行
      text-overflow: ellipsis; //溢出显示省略号
    }

    .searchListItem:hover {
      background: #1f9bfd !important;
      color: #fff;
      cursor: pointer;
    }
  }

  .searchListItemAct {
    background: #1f9bfd !important;
    color: #fff !important;
  }

  .bondCard {
    background-color: #262d47;
    color: #ffffff;
    margin-bottom: 10px;

    .info {
      display: flex;
      padding: 15px 20px;

      .infoItem {
        flex: 1;
      }
    }

    .infoItemLabel {
      margin-right: 30px;
      font-size: 14px;
    }

    .infoItemVal {
      font-size: 14px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #d6dcff;
    }
  }

  .el-table ::v-deep th.el-table__cell {
    background-color: #1c2238 !important;
    color: #fff;
  }

  .tableBox {
    background-color: #262d47;
    flex: 1;
    padding: 15px 10px;
  }

  .tableBoxChild {
    min-height: 500px;
  }

  .el-pagination {
    text-align: right;
  }

  .leftTitle {
    height: 40px;
    line-height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding-left: 17px;
    margin-bottom: 10px;
  }

  .customersCardTitle {
    height: 40px;
    background: #354060;
    font-size: 14px;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    padding: 10px 16px;
  }
}
.operator {
  color: #1f9bfd;
  margin-right: 8px;
  cursor: pointer;
}
::v-deep {
  .el-dialog {
    border-top: 4px solid rgba($color: #1f9bfd, $alpha: 0.9);
    .el-dialog__header {
      border-bottom: 1px solid rgba(126, 163, 255, 0.3);
      padding: 0;
      height: 49px;
      line-height: 49px;
      padding-left: 16px;
    }
    .el-dialog__footer {
      border-top: 1px solid rgba(126, 163, 255, 0.3);
    }
  }
  .el-table__cell {
    border-right: 1px solid rgba(126, 163, 255, 0.3);
  }
}
</style>
